<template>
    <el-breadcrumb class="breadcrumb-container" separator="/">
        <el-breadcrumb-item class="item" :replace="true"  to="/home">首页</el-breadcrumb-item>
        <template v-for="item in rs">
            <el-breadcrumb-item class="item" :replace="true" :to="item.path" :key="item.name">{{item.meta.title}}</el-breadcrumb-item>
        </template>
    </el-breadcrumb>
</template>

<script>
export default {
    data() {
        return {
            rs: [],
        };
    },
    mounted() {
        this.updateData();
    },
    methods: {
        updateData() {
            let matched = this.$route.matched;
            let length = matched.length;
            this.rs = [];
            matched.forEach((e) => {
                if (e.path != "/main" && e.path != "/home") {
                    this.rs.push(e);
                }
            });
        },
    },
    watch: {
        $route() {
            this.updateData();
        },
    },
};
</script>

<style scoped>
.item {
    cursor: pointer;
}
</style>